import './Scss/PartyOrganization.scss'
import { useEffect, useState } from 'react'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'

const scoreArr = [
    { uuid: '1', title: '排名' },
    { uuid: '2', title: '姓名' },
    { uuid: '3', title: '编号' },
    { uuid: '4', title: '分数' },
]

export const PartyOrganization001 = () => {
    const [Number, setNumber] = useState(0)
    const [NumberList, setNumberList] = useState([])
    const [PartyBranch, setPartyBranch] = useState([])
    const [PartyScore, setPartyScore] = useState([])

    const { runAsync: getPersonStatGetnPartyMemberStatByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            const number = list.reduce((acc, cur) => acc + cur.partyMemberCount, 0)
            setNumber(number)
            setNumberList(list)
        },
    })
    const { runAsync: getPersonStatGetnPartyMember } = useRequest(Http, {
        manual: true,
        onSuccess: res => setPartyBranch(res.list),
    })

    const { runAsync: getPersonExaminationListsByScore } = useRequest(Http, {
        manual: true,
        onSuccess: res => setPartyScore(res.list),
    })

    useEffect(() => {
        getPersonStatGetnPartyMemberStatByOrg({ url: 'getPersonStatGetnPartyMemberStatByOrg' })
        getPersonStatGetnPartyMember({ url: 'getPersonStatGetnPartyMember' })
        getPersonExaminationListsByScore({ url: 'getPersonExaminationListsByScore' })
    }, [getPersonStatGetnPartyMemberStatByOrg, getPersonStatGetnPartyMember, getPersonExaminationListsByScore])
    return (
        <div className="PartyOrganization001">
            <div className="one">
                <span>党员总数：</span>
                <span>{Number}人</span>
            </div>
            <div className="two">
                <div className="TitleSmall">
                    <div>项目党员人数</div>
                    <div />
                </div>
                <div className="list">
                    {NumberList.map(({ uuid, tableName, partyMemberCount }) => (
                        <div key={uuid}>
                            <div>{tableName}</div>
                            <div>{partyMemberCount}人</div>
                        </div>
                    ))}
                </div>
            </div>
            <div className="thr">
                <div className="TitleSmall">
                    <div>先进党支部</div>
                    <div />
                </div>
                <div className="list">
                    {PartyBranch.map(({ uuid, tableName }) => (
                        <div key={uuid}>
                            {' '}
                            {ICON['wanchengshuai']} {tableName}{' '}
                        </div>
                    ))}
                </div>
            </div>
            <div className="fou">
                <div className="TitleSmall">
                    <div>党员教育排名</div>
                    <div />
                </div>
                <div className="title">
                    {scoreArr.map(({ uuid, title }) => (
                        <div key={uuid}>{title}</div>
                    ))}
                </div>
                <div className="list">
                    {PartyScore.map(({ uuid, personName, personId, score }, index) => (
                        <div key={uuid}>
                            <div>{index + 1}</div>
                            <div>{personName}</div>
                            <div>{personId}</div>
                            <div>{score}</div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
